<template>
	<div>
		<el-upload
		class="upload-demo"
		:action="uploadUrl"
		:on-preview="handlePreview"
		:on-remove="handleRemove"
		:on-success="handleGalleryUrl"
		:before-remove="beforeRemove"
		:multiple="multiple"
		:limit="limit"
		:on-exceed="handleExceed"
		:file-list="fileList">
			<el-button size="small" type="primary">点击上传</el-button>
			<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
		</el-upload>
	</div>
</template>
<script>
	import {
		CODE,
		uploadUrl
	} from '@/common/apiconfig';

	export default {
		data() {
			return {
				imgPath: [],
				uploadUrl, //: process.env.VUE_APP_BASE_API + "upload/uploadImg",
			};
		},
		props: {
			fileList: Array,
			multiple: true,
			limit: {
				type: [Number,String],
				default: 99
			},
			// value: Array,
		},
		watch: {
			// value() {
			// 	try {
			// 		let files = this.value.map(e => ({
			// 			name: e.name,
			// 			url: e.url
			// 		}));
			// 		this.fileList = files;
			// 	} catch (error) {
			// 		// this.fileList = [];

			// 	}
			// },
		},
		mounted() {
			// try {
			// 	let files = this.value.map(e => ({
			// 		name: e.name,
			// 		url: e.url
			// 	}));
			// 	this.fileList = files;
			// 	console.log(this.fileList)
			// 	this.imgPath = this.value;
			// } catch (error) {
			// 	this.fileList = [];
			// }
		},
		methods: {
			handleRemove(file, fileList) {
				this.$emit('change', this.imgPath);
			},
			handlePreview(file) {
				this.$emit('change', this.imgPath);
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			},
			handleGalleryUrl(response, file, fileList) {
				if (response[CODE.code] === CODE.success) {
					// debugger;
					this.imgPath.push({name: response.data.path,url: response.data.path});
					console.log(this.imgPath)
				}
				this.change();
			},
			change() {
				this.$emit('change', this.imgPath);
			},
			// handleGalleryUrl(response, file, fileList) {
			// 	if (response[CODE.code] === CODE.success) {
			// 		// debugger;
			// 		this.imgPath.push(response.data.path);
			// 	}
			// 	this.change();
			// },
			// // 超过数量
			// uploadOverrun: function() {
			// 	this.$toast("上传文件个数超出限制!最多上传"+this.limit+"个");
			// },
			// change() {
			// 	this.$emit('update:value', this.imgPath);
			// },
			// handleRemove: function(file, fileList) {
			// 	for (var i = 0; i < this.imgPath.length; i++) {
			// 		// 这里存在两种情况
			// 		// 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
			// 		//    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
			// 		// 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
			// 		var url
			// 		if (file.response === undefined) {
			// 			url = file.url
			// 		} else {
			// 			url = file.response.data
			// 		}
			// 		if (this.imgPath[i] === url) {
			// 			this.imgPath.splice(i, 1)
			// 		}
			// 	}
			// 	this.change();
			// },
		},
	};
</script>

<style lang="scss" scoped>
</style>>